@charset "UTF-8";
/* Colors */
/* Colors From Google Material Design
https://www.google.com/design/spec/style/color.html
*/
.red-base {
    background-color: #F44336 !important;
}
.red-base.btn-floating:hover {
    background-color: #f55a4e !important;
}

.red-lighten-1 {
    background-color: #EF5350 !important;
}
.red-lighten-1.btn-floating:hover {
    background-color: #f16a67 !important;
}

.red-lighten-2 {
    background-color: #E57373 !important;
}
.red-lighten-2.btn-floating:hover {
    background-color: #e98989 !important;
}

.red-darken-1 {
    background-color: #E53935 !important;
}
.red-darken-1.btn-floating:hover {
    background-color: #e84f4c !important;
}

.red-darken-2 {
    background-color: #D32F2F !important;
}
.red-darken-2.btn-floating:hover {
    background-color: #d74444 !important;
}

.blue-base {
    background-color: #2196F3 !important;
}
.blue-base.btn-floating:hover {
    background-color: #39a1f4 !important;
}

.blue-lighten-1 {
    background-color: #42A5F5 !important;
}
.blue-lighten-1.btn-floating:hover {
    background-color: #5ab1f6 !important;
}

.blue-lighten-2 {
    background-color: #64B5F6 !important;
}
.blue-lighten-2.btn-floating:hover {
    background-color: #7cc1f7 !important;
}

.blue-darken-1 {
    background-color: #1E88E5 !important;
}
.blue-darken-1.btn-floating:hover {
    background-color: #3594e8 !important;
}

.blue-darken-2 {
    background-color: #1976D2 !important;
}
.blue-darken-2.btn-floating:hover {
    background-color: #2083e4 !important;
}

.indigo-base {
    background-color: #3F51B5 !important;
}
.indigo-base.btn-floating:hover {
    background-color: #4d5ec1 !important;
}

.indigo-lighten-1 {
    background-color: #5C6BC0 !important;
}
.indigo-lighten-1.btn-floating:hover {
    background-color: #6e7cc7 !important;
}

.indigo-lighten-2 {
    background-color: #7986CB !important;
}
.indigo-lighten-2.btn-floating:hover {
    background-color: #8b97d2 !important;
}

.indigo-darken-1 {
    background-color: #3949AB !important;
}
.indigo-darken-1.btn-floating:hover {
    background-color: #3f51be !important;
}

.indigo-darken-2 {
    background-color: #303F9F !important;
}
.indigo-darken-2.btn-floating:hover {
    background-color: #3647b3 !important;
}

.deep_purple-base {
    background-color: #673AB7 !important;
}
.deep_purple-base.btn-floating:hover {
    background-color: #7446c4 !important;
}

.deep_purple-lighten-1 {
    background-color: #7E57C2 !important;
}
.deep_purple-lighten-1.btn-floating:hover {
    background-color: #8c6ac9 !important;
}

.deep_purple-lighten-2 {
    background-color: #9575CD !important;
}
.deep_purple-lighten-2.btn-floating:hover {
    background-color: #a388d4 !important;
}

.deep_purple-darken-1 {
    background-color: #5E35B1 !important;
}
.deep_purple-darken-1.btn-floating:hover {
    background-color: #693bc4 !important;
}

.deep_purple-darken-2 {
    background-color: #512DA8 !important;
}
.deep_purple-darken-2.btn-floating:hover {
    background-color: #5b32bc !important;
}

.orange-base {
    background-color: #FF9800 !important;
}
.orange-base.btn-floating:hover {
    background-color: #ffa21a !important;
}

.orange-lighten-1 {
    background-color: #FFA726 !important;
}
.orange-lighten-1.btn-floating:hover {
    background-color: #ffb140 !important;
}

.orange-lighten-2 {
    background-color: #FFB74D !important;
}
.orange-lighten-2.btn-floating:hover {
    background-color: #ffc167 !important;
}

.orange-darken-1 {
    background-color: #FB8C00 !important;
}
.orange-darken-1.btn-floating:hover {
    background-color: #ff9816 !important;
}

.orange-darken-2 {
    background-color: #F57C00 !important;
}
.orange-darken-2.btn-floating:hover {
    background-color: #ff8910 !important;
}

.deep_orange-base {
    background-color: #FF5722 !important;
}
.deep_orange-base.btn-floating:hover {
    background-color: #ff6a3c !important;
}

.deep_orange-lighten-1 {
    background-color: #FF7043 !important;
}
.deep_orange-lighten-1.btn-floating:hover {
    background-color: #ff835d !important;
}

.deep_orange-lighten-2 {
    background-color: #FF8A65 !important;
}
.deep_orange-lighten-2.btn-floating:hover {
    background-color: #ff9d7f !important;
}

.deep_orange-darken-1 {
    background-color: #F4511E !important;
}
.deep_orange-darken-1.btn-floating:hover {
    background-color: #f56436 !important;
}

.deep_orange-darken-2 {
    background-color: #E64A19 !important;
}
.deep_orange-darken-2.btn-floating:hover {
    background-color: #e95c30 !important;
}

.teal-base {
    background-color: #009688 !important;
}
.teal-base.btn-floating:hover {
    background-color: #00b09f !important;
}

.teal-lighten-1 {
    background-color: #26A69A !important;
}
.teal-lighten-1.btn-floating:hover {
    background-color: #2bbbad !important;
}

.teal-lighten-2 {
    background-color: #4DB6AC !important;
}
.teal-lighten-2.btn-floating:hover {
    background-color: #5fbdb4 !important;
}

.teal-darken-1 {
    background-color: #00897B !important;
}
.teal-darken-1.btn-floating:hover {
    background-color: #00a392 !important;
}

.teal-darken-2 {
    background-color: #00796B !important;
}
.teal-darken-2.btn-floating:hover {
    background-color: #009382 !important;
}

.yellow-base {
    background-color: #FFEB3B !important;
}
.yellow-base.btn-floating:hover {
    background-color: #ffee55 !important;
}

.yellow-lighten-1 {
    background-color: #FFEE58 !important;
}
.yellow-lighten-1.btn-floating:hover {
    background-color: #fff172 !important;
}

.yellow-lighten-2 {
    background-color: #FFF176 !important;
}
.yellow-lighten-2.btn-floating:hover {
    background-color: #fff490 !important;
}

.yellow-darken-1 {
    background-color: #FDD835 !important;
}
.yellow-darken-1.btn-floating:hover {
    background-color: #fddd4e !important;
}

.yellow-darken-2 {
    background-color: #FBC02D !important;
}
.yellow-darken-2.btn-floating:hover {
    background-color: #fbc846 !important;
}

.cyan-base {
    background-color: #00BCD4 !important;
}
.cyan-base.btn-floating:hover {
    background-color: #00d3ee !important;
}

.cyan-lighten-1 {
    background-color: #26C6DA !important;
}
.cyan-lighten-1.btn-floating:hover {
    background-color: #3cccde !important;
}

.cyan-lighten-2 {
    background-color: #4DD0E1 !important;
}
.cyan-lighten-2.btn-floating:hover {
    background-color: #63d6e5 !important;
}

.cyan-darken-1 {
    background-color: #00ACC1 !important;
}
.cyan-darken-1.btn-floating:hover {
    background-color: #00c3db !important;
}

.cyan-darken-2 {
    background-color: #0097A7 !important;
}
.cyan-darken-2.btn-floating:hover {
    background-color: #00aec1 !important;
}

.green-base {
    background-color: #4CAF50 !important;
}
.green-base.btn-floating:hover {
    background-color: #5cb860 !important;
}

.green-lighten-1 {
    background-color: #66BB6A !important;
}
.green-lighten-1.btn-floating:hover {
    background-color: #78c37b !important;
}

.green-lighten-2 {
    background-color: #81C784 !important;
}
.green-lighten-2.btn-floating:hover {
    background-color: #93cf95 !important;
}

.green-darken-1 {
    background-color: #43A047 !important;
}
.green-darken-1.btn-floating:hover {
    background-color: #4bb24f !important;
}

.green-darken-2 {
    background-color: #388E3C !important;
}
.green-darken-2.btn-floating:hover {
    background-color: #3fa044 !important;
}

.grey-base {
    background-color: #9E9E9E !important;
}
.grey-base.btn-floating:hover {
    background-color: #ababab !important;
}

.grey-lighten-1 {
    background-color: #BDBDBD !important;
}
.grey-lighten-1.btn-floating:hover {
    background-color: #cacaca !important;
}

.grey-lighten-2 {
    background-color: #E0E0E0 !important;
}
.grey-lighten-2.btn-floating:hover {
    background-color: #ededed !important;
}

.grey-darken-1 {
    background-color: #757575 !important;
}
.grey-darken-1.btn-floating:hover {
    background-color: #828282 !important;
}

.grey-darken-2 {
    background-color: #616161 !important;
}
.grey-darken-2.btn-floating:hover {
    background-color: #6e6e6e !important;
}

a {
    text-decoration: none;
    color: #2196F3;
}
a:hover {
    color: #51adf6;
    text-decoration: underline;
    transition: .2s;
}

code {
    font-family: monospace;
}

.blod {
    font-weight: bold;
}

.btn {
    margin: 5px auto;
    padding: 7px 2rem;
    font-size: 14px;
    display: inline-block;
    text-align: center;
    border: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    text-decoration: none;
}
.btn:hover {
    text-decoration: none;
}

.btn-default {
    color: #fff;
    background-color: #039be5;
}
.btn-default span {
    line-height: inherit;
    font-size: 1.3rem;
}
.btn-default:hover {
    background-color: #06abfc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
}

.btn-primary {
    color: #fff;
    background-color: #EF5350;
}
.btn-primary:hover {
    background-color: #f16a67;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
}

.btn-warning {
    color: #fff;
    background-color: #FF9800;
}
.btn-warning:hover {
    background-color: #ffa21a;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
}

.btn-success {
    color: #fff;
    background-color: #66BB6A;
}
.btn-success:hover {
    background-color: #78c37b;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    color: #fff;
}

ol, ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 3px 0;
}
img:after {
    text-align: center;
}

.image-link:hover {
    cursor: zoom-in;
}

p {
    line-height: 1.6em;
    margin: 1.6em 0;
}

article ul {
    list-style: disc;
}
article ol {
    list-style: decimal;
}
article h1, article h2, article h3 {
    font-family: 新細明體;
}
article h2 {
    padding-bottom: 10px;
    border-bottom: 2px solid grey;
}

.article-list {
    position: relative;
}
.article-list .article-card {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    margin: 16px;
    background-color: #fff;
}
.article-list .article-card .article-card-media {
    display: flex;
    flex-grow: 1;
    flex-direction: row;
    align-items: flex-end;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-size: cover;
    background-position: center;
    padding: 24px;
    color: #fafafa;
}
.article-list .article-card .article-card-media a {
    color: inherit;
    text-decoration: none;
    line-height: 40px;
}
.article-list .article-card .article-card-media h3 {
    display: block;
    line-height: 40px;
    font-size: 34px;
    font-weight: 100;
    cursor: pointer;
    margin: 0;
}
.article-list .article-card .article-card-support-text {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    min-height: 50px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.article-list .article-card .article-card-support-text .author-pic {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 16px;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 1em;
    background: cover no-repeat;
    background-size: cover;
}
.article-list .article-card .article-card-support-text .author-name {
    margin-right: 1em;
}
.article-list .article-card .article-card-support-text *, .article-list .article-card .article-card-support-text *:before, .article-list .article-card .article-card-support-text *:after {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.table-striped {
    width: 100%;
    max-width: 100%;
    text-align-last: left;
    line-height: 1.43;
    border-collapse: collapse;
}
.table-striped tbody th, .table-striped tbody tr, .table-striped tbody td {
    border-top: 1px solid #ddd;
    padding: 8px;
}
.table-striped tr:nth-child(even) {
    background-color: #E0E0E0;
}
.table-striped thead {
    border-bottom: 2px solid #ddd;
}
.table-striped thead th {
    padding: 8px;
}

.table {
    width: 100%;
    max-width: 100%;
    text-align-last: left;
    line-height: 1.43;
    border-collapse: collapse;
}
.table tbody th, .table tbody tr, .table tbody td {
    border-top: 1px solid #ddd;
    padding: 8px;
}
.table .table-border th, .table .table-border tr, .table .table-border td {
    border: 1px solid #ddd;
}
.table .table-color {
    background-color: #E0E0E0;
}
.table thead {
    border-bottom: 2px solid #ddd;
}
.table thead th {
    padding: 8px;
}

.footer {
    background: #171f26;
    position: relative;
    padding: 40px 0;
    font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;
    color: rgba(212, 212, 212, 0.83);
}
.footer:before, .footer:after {
    display: table;
    content: "";
}
.footer .inline {
    margin: 0;
}
.footer .inline li {
    display: inline;
    margin: 0 5px;
}
.footer p {
    padding-left: 45px;
    margin: 3px 0;
}
.footer a:hover {
    text-decoration: none;
    color: #fff;
}
.footer i {
    top: 7px;
}

.author-box {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    background: #fff;
    margin: 20px 0;
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.author-box *, .author-box *:before, .author-box *:after {
    display: flex;
    flex-direction: column;
}
.author-box .author-pic {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 1em;
    background: cover no-repeat;
    background-size: cover;
}
.author-box .author-name {
    font-size: 1.5rem;
    font-weight: 500;
    margin-right: 1em;
}

.gallery {
    display: inline-block;
    position: relative;
}
.gallery img {
    width: 7em;
    height: 6.5em;
    margin: 3px;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0.6;
    border: 3px solid #39a1f4;
}
.gallery img:hover {
    opacity: 1;
    border: 3px solid #39a1f4;
}
.gallery .image-link {
    display: inline-block;
}

.row:before {
    display: table;
    content: " ";
}
.row:after {
    clear: both;
}

.grid-1 {
    width: 6.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-1:before {
    display: table;
    content: " ";
}
.grid-1:after {
    clear: both;
}

.grid-2 {
    width: 15%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-2:before {
    display: table;
    content: " ";
}
.grid-2:after {
    clear: both;
}

.grid-3 {
    width: 23.33333%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-3:before {
    display: table;
    content: " ";
}
.grid-3:after {
    clear: both;
}

.grid-4 {
    width: 31.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-4:before {
    display: table;
    content: " ";
}
.grid-4:after {
    clear: both;
}

.grid-5 {
    width: 40%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-5:before {
    display: table;
    content: " ";
}
.grid-5:after {
    clear: both;
}

.grid-6 {
    width: 48.33333%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-6:before {
    display: table;
    content: " ";
}
.grid-6:after {
    clear: both;
}

.grid-7 {
    width: 56.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-7:before {
    display: table;
    content: " ";
}
.grid-7:after {
    clear: both;
}

.grid-8 {
    width: 65%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-8:before {
    display: table;
    content: " ";
}
.grid-8:after {
    clear: both;
}

.grid-9 {
    width: 73.33333%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-9:before {
    display: table;
    content: " ";
}
.grid-9:after {
    clear: both;
}

.grid-10 {
    width: 81.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-10:before {
    display: table;
    content: " ";
}
.grid-10:after {
    clear: both;
}

.grid-11 {
    width: 90%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-11:before {
    display: table;
    content: " ";
}
.grid-11:after {
    clear: both;
}

.grid-12 {
    width: 98.33333%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
}
.grid-12:before {
    display: table;
    content: " ";
}
.grid-12:after {
    clear: both;
}

.col-xs-1 {
    width: 8.33333%;
    float: left;
}

.col-xs-2 {
    width: 16.66667%;
    float: left;
}

.col-xs-3 {
    width: 25%;
    float: left;
}

.col-xs-4 {
    width: 33.33333%;
    float: left;
}

.col-xs-5 {
    width: 41.66667%;
    float: left;
}

.col-xs-6 {
    width: 50%;
    float: left;
}

.col-xs-7 {
    width: 58.33333%;
    float: left;
}

.col-xs-8 {
    width: 66.66667%;
    float: left;
}

.col-xs-9 {
    width: 75%;
    float: left;
}

.col-xs-10 {
    width: 83.33333%;
    float: left;
}

.col-xs-11 {
    width: 91.66667%;
    float: left;
}

.col-xs-12 {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
}

.container {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
    min-height: 100%;
    height: 100%;
}

.main {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.main:after {
    content: " ";
    display: block;
    clear: both;
}

[class^=col-xs] {
    padding: 2em 3em;
}

/*!
 * Waves v0.6.0
 * http://fian.my.id/Waves
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/Waves/blob/master/LICENSE
 */
.waves-effect {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    z-index: 1;
    will-change: opacity, transform;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.waves-effect .waves-ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.2);
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    pointer-events: none;
}
.waves-effect.waves-light .waves-ripple {
    background-color: rgba(255, 255, 255, 0.45);
}
.waves-effect.waves-red .waves-ripple {
    background-color: rgba(244, 67, 54, 0.7);
}
.waves-effect.waves-yellow .waves-ripple {
    background-color: rgba(255, 235, 59, 0.7);
}
.waves-effect.waves-orange .waves-ripple {
    background-color: rgba(255, 152, 0, 0.7);
}
.waves-effect.waves-purple .waves-ripple {
    background-color: rgba(156, 39, 176, 0.7);
}
.waves-effect.waves-green .waves-ripple {
    background-color: rgba(76, 175, 80, 0.7);
}
.waves-effect.waves-teal .waves-ripple {
    background-color: rgba(0, 150, 136, 0.7);
}

.waves-notransition {
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.waves-circle {
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

.waves-input-wrapper {
    border-radius: 0.2em;
    vertical-align: bottom;
}
.waves-input-wrapper .waves-button-input {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.waves-circle {
    text-align: center;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 50%;
    -webkit-mask-image: none;
}

.waves-block {
    display: block;
}

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple {
    z-index: -1;
}

/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}
.mfp-preloader a {
    color: #CCC;
}
.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover, .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100);
}
.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    filter: alpha(opacity=65);
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
    margin-top: -54px;
}
.mfp-arrow:hover, .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100);
}
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}
.mfp-arrow:after,
.mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}
.mfp-arrow:before,
.mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}
.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}
.mfp-arrow-left:before,
.mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}
.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}
.mfp-arrow-right:before,
.mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
    line-height: 0;
}
.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}
.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}
.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
     * Remove all paddings around the image on small screen
     */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }
    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box;
    }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}
@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}
.mfp-ie7 .mfp-img {
    padding: 0;
}
.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px;
}
.mfp-ie7 .mfp-container {
    padding: 0;
}
.mfp-ie7 .mfp-content {
    padding-top: 44px;
}
.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    /*src: url(../fonts/MaterialIcons-Regular.eot);*/
    /* For IE6-8 */
    src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format("woff2");
}
.material-icons {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    top: 4px;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
.material-icons.menu-button, .material-icons.menu-button.close {
    cursor: pointer;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    -moz-transform-origin: center center 50%;
    -ms-transform-origin: center center 50%;
    -webkit-transform-origin: center center 50%;
    transform-origin: center center 50%;
    color: #fff;
    background-color: #26C6DA;
    position: absolute;
    top: 8px;
    left: 20px;
    z-index: 101;
    font-size: 2em;
    padding: 5px;
}
.material-icons.menu-button:before, .material-icons.menu-button.close:before {
    content: "\E5D2";
}
.material-icons.menu-button:active {
    -moz-animation: rotate 1s ease 1s;
    -webkit-animation: rotate 1s ease 1s;
    animation: rotate 1s ease 1s;
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
@keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}
.material-icons.menu-button.close:before {
    content: "\E5CD";
}
.material-icons.menu-button.close:active {
    -moz-animation: rotate 1s ease 1s;
    -webkit-animation: rotate 1s ease 1s;
    animation: rotate 1s ease 1s;
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
.arrow.downward:before {
    content: "\E5DB";
}

.nav-menu {
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    background-color: #fff;
    text-decoration: none;
}
.nav-menu .active {
    background: #BDBDBD;
}
.nav-menu ul {
    margin: 0;
    padding-left: 0;
}
.nav-menu li {
    font-size: 16px;
    padding: 0 15px;
}
.nav-menu li a {
    display: block;
    line-height: 44px;
    height: 44px;
    padding: 0 15px;
    color: #000 !important;
    text-decoration: none !important;
}
.nav-menu li a i {
    padding-right: 3px;
    top: 5px;
}
.nav-menu li:hover {
    background-color: #BDBDBD;
}

#progress {
    position: fixed;
    height: 2px;
    background: #42A5F5;
    z-index: 999;
    -moz-transition: opacity 500ms linear;
    -o-transition: opacity 500ms linear;
    -webkit-transition: opacity 500ms linear;
    transition: opacity 500ms linear;
}
#progress.done {
    opacity: 0;
}
#progress span {
    position: absolute;
    height: 2px;
    -moz-box-shadow: #2f9bf4 1px 0 6px 1px;
    -webkit-box-shadow: #2f9bf4 1px 0 6px 1px;
    box-shadow: #2f9bf4 1px 0 6px 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    opacity: 1;
    width: 150px;
    right: -10px;
    -moz-animation: pulse 2s ease-out 0s infinite;
    -webkit-animation: pulse 2s ease-out 0s infinite;
    animation: pulse 2s ease-out 0s infinite;
}
@-moz-keyframes pulse {
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0.6;
    }
}
@-webkit-keyframes pulse {
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0.6;
    }
}
@keyframes pulse {
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0.6;
    }
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local("Lato Regular"), local("Lato-Regular"), url(../fonts/Lato.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html:lang(zh-Hans),
html:lang(zh-CN) {
    font-family: "Biaodian Pro Sans GB", "Helvetica Neue", Helvetica, Arial, "Han Heiti GB", sans-serif;
}

body {
    height: 100%;
    padding: 10px auto;
    line-height: 1.5em;
    color: rgba(0, 0, 0, 0.87);
    font-family: "Lato", "文泉驛正黑", WenQuanYi Zen Hei, 微軟正黑體, Microsoft JhengHei, Microsoft JhengHei, Droid Sans, PMingLiU, Helvetica, sans-serif;
    font-size: 16px;
}

.nav-content {
    background-color: #E0E0E0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header {
    -moz-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center 92%;
    display: table;
    position: relative;
    width: 100%;
    height: 360px;
}
.header.index {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(../images/firstPageBackground.jpg) no-repeat local center center/cover;
    height: 100vh;
}
.header .baner {
    text-align: center;
}
.header .baner h1 {
    color: teal;
    font-family: "Open Sans", Helvetica, sans-serif;
}
.header .baner p {
    color: teal;
}
.header .article-meta {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-weight: 300px;
}
.header .article-meta h1 {
    font-size: 2em;
}

ul.actions {
    list-style: none;
    padding-left: 0;
}

.fixed-action-btn {
    position: fixed;
    bottom: 45px;
    right: 24px;
    z-index: 998;
}
.fixed-action-btn .btn-floating {
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    color: #fff;
    display: inline-block;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    width: 37px;
    height: 37px;
    line-height: 37px;
    padding: 0;
}
.fixed-action-btn .btn-floating:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.fixed-action-btn .btn-floating i {
    width: inherit;
    display: inline-block;
    font-size: 1.3rem;
    text-align: center;
    top: 0;
    line-height: 37px;
}
.fixed-action-btn .btn-floating.btn-large {
    width: 55px;
    height: 55px;
}
.fixed-action-btn .btn-floating.btn-large i {
    font-size: 1.6rem;
    line-height: 55px;
}
.fixed-action-btn.open ul {
    visibility: visible;
}
.fixed-action-btn ul {
    -moz-transition: visibility 0.3s ease;
    -o-transition: visibility 0.3s ease;
    -webkit-transition: visibility 0.3s ease;
    transition: visibility 0.3s ease;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    text-align: center;
    padding: 0;
}
.fixed-action-btn ul li {
    margin-bottom: 15px;
}
.fixed-action-btn ul .menu i:before {
    content: "\E5D2";
}
.fixed-action-btn ul .menu.close i:before {
    content: "\E5CD";
}

.shadow-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.shadow-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.shadow-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.shadow-4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.shadow-5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.article {
    background-color: #fff;
    margin: 3em 2em;
    padding: 3em 2em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.article.article-type-post {
    position: relative;
    top: -80px;
}
.article .image-meta {
    display: block;
    text-align: center;
    margin-top: 6px;
    color: #757575;
}
.article .image-meta:hover {
    text-decoration: none;
}
.article .image-link:hover {
    text-decoration: none;
}

.scrollup {
    cursor: pointer;
}

.sitemap-list {
    position: relative;
    display: grid;
}
.sitemap-list:before {
    content: "";
}
.sitemap-list .sitemap {
    width: 100%;
    vertical-align: middle;
}

::-webkit-scrollbar-thumb {
    background: #009688;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-button {
    width: 8px;
    height: 0;
}

::-webkit-scrollbar-track {
    background: #fff;
}
